<template>
	<view >
		<myheader  ref="myheader" ></myheader>
	<view v-if="showStep == 1" class="my-page-content ">
		<view class="my-title">完善房源设施服务</view>
		<view class="my-m-title">房源介绍</view>
		<van-field
		  custom-class="my-textare-class" 
		  :value="formData.description"
		  custom-style="min-height: 40px!important;"
		  maxlength="500"
		  show-word-limit="true"
		  label=" "
		  :title-width="0"
		  type="textarea"
		  placeholder="例如：漂亮干净的公寓，带落地窗的大阳台。 海岸阳光充足。 位于市中心的绝佳位置，交通便利。"
		  :autosize= "{ minHeight: 40 }"
		  :border="false"
		 @change="changeValue($event, 'description')"
		/>
		<view class="my-m-title">管家介绍</view>
		<van-field
		  custom-class="my-textare-class" 
		  :value="formData.landlord_desc"
		  maxlength="200"
		  show-word-limit="true"
		  label=" "
		  :title-width="0"
		  type="textarea"
		  placeholder="例如：超赞管家，10 年出租经验"
		  autosize
		  :border="false"
		  @change="changeValue($event, 'landlord_desc')"
		/>
		
		<view class="my-m-title"> 面积</view>
		<view>
	   <van-field
		    custom-class="my-textare-class" 
		    :value="formData.area"
		    label=" "
			@change="changeValue($event, 'area')"
		    placeholder="请输入"
		  >
		  <span  slot="button">平方尺</span>
		  </van-field>
		   <view class="grey-tips" v-if="formData.area > 0">=  {{(formData.area/9).toFixed(2)}} 平方米</view>
		</view>
		
		<view class="my-m-title">房型</view>
		<picker class="mb40 my-select-class" mode = 'multiSelector' @change="bindPickerChange" :value="roomIndex" :range="roomData">
			    <view v-if="roomIndex.length > 0">
					{{formData.bedrooms + '室'}}
					{{formData.livingrooms + '厅'}}
					{{formData.kitchens + '厨'}}
					{{formData.bathrooms  + '卫'}}
				</view>
				<view v-else class="grey-tips"> 请选择</view>
		</picker>
		<view  class="mb10 flex-between">
			 <span class="my-m-title">是否可以做饭</span>
			<van-switch :active-value="1" :inactive-value="0" :checked="formData.cooking"  @change="changeCookingValue" inactive-color="#ccc" size="20px" active-color="#FCE353"  />
		</view>
		
		<view  class="mb10 flex-between">
			 <span class="my-m-title">房屋照片</span>
			 <span @click="showStep = 2" >
				 <span v-if="formData.images.length ==0" class="color-orange"> 去上传 
				    <uni-icons class="my-right-icon color-orange" type="right" size="18"></uni-icons>
				  </span>
				 <span v-else>
					 已完成  
					 <uni-icons class="my-right-icon" type="right" size="18"></uni-icons>
					</span>
				
			 </span>
		</view>
		<view  class="mb10 flex-between">
			 <span class="my-m-title">配套设施</span>
			 <span @click="showStep = 3" >
				 <span  class="color-orange" v-if="!roomDeviceFlag">  
				    去编辑 
				 <uni-icons class="my-right-icon color-orange" type="right" size="18"></uni-icons>
				 </span>
				 <span v-else>
					 已完成 
					  <uni-icons class="my-right-icon" type="right" size="18"></uni-icons>
				</span>
				
			 </span>
		</view>
		<view class="my-m-title">房源特色</view>
		<view  class="mb10 tag-list">
			<view  
			 @click="selectedTag(item)"
			:class="{'active-item ': item.checked}" 
			v-for="(item, index) in tagList" 
			:key="index"
			 class="tag-item">
				{{item.label}}
			</view>
			
		</view>
	</view>
	
	 <setHouseImg  :imgList="formData.images" ref="setHouseImg"   v-else-if="showStep == 2"></setHouseImg>
	 <setRoomDevice :roomTagList="roomTagList" ref="setRoomDevice"  v-else-if="showStep == 3"></setRoomDevice>
	 <footBtn :btnText="showStep== 1?'下一步': '保存'"  @nextStep="nextStep"></footBtn>
	
	</view>
		
</template>

<script>
	import footBtn from '@/components/myBtn/footBtn.vue'
	import setHouseImg from './setHouseImg.vue'
	import setRoomDevice from './setRoomDevice.vue'
	import myheader from '../components/myheader.vue';
	
	export default {
		components:{
			footBtn,
			setHouseImg,
			setRoomDevice,
			myheader
		},
	    data() {
	        return {
				houseId: this.$getStorage('houseId'),
				showStep: 1,
				headerIndex: 1,
				formData: {
					// id: '',
					description: '',
					landlord_desc: '',
					area: '',
					bedrooms: '',
					livingrooms: '',
					bathrooms: '',
					kitchens: '',
					cooking: '',
					images: [],
					tags: []	
				},
				tampFormData: {},
				roomData: [[],[],[],[], []],
				tagList: [],
				roomTagList: {
					indoor: [],
					room: [],
					outDoor: []
				},
				selectDeviceList: [],
	            roomIndex: [],
				roomDeviceFlag: false
	        }
	    },
		onLoad(option) {
			if(option.lat) {
				const data = {
					id: this.$getStorage("houseId"),
					lat: option.lat,
					lng: option.lng
				}
				this.setLat(data)
			}
		},
		onShow(option) {
			this.$refs.myheader.setHeaderIndex(1);
			this.houseId = this.$getStorage('houseId');
		},
		mounted() {
			this.init();
		},
		 methods: {
			 init() {
				 this.getRoomData();
			
				 if(this.houseId) {
					 this.getMyHouseInfo();
				 } else {
					 this.getHouseCharacter();
					 this.getHouseFacility();
				 }
			 },
			 getMyHouseInfo() {
			 	 this.$http.getMyHouseInfo(this.houseId).then(res => {
					 this.formData.id = this.houseId;
			 		Object.keys(this.formData).forEach(key =>{
						// console.log(res[key] , res[key] === 0, key,'res[key] || res[key] === 0')
			 			if(res[key] || res[key] === 0) {
			 				this.formData[key] = res[key];
			 			}
			 		})
					this.roomIndex =[this.formData.bedrooms,this.formData.livingrooms,this.formData.kitchens,this.formData.bathrooms];
					this.getHouseCharacter();
					this.getHouseFacility();
			 	 })
			 },
			 getHouseCharacter() {
				 this.$http.getHouseCharacter().then(res => {
					let arr = this.formData.tags.map(item => item.tag_id);
					res.forEach(item =>{
						item.checked = false;
						item.tag_id = item.value;
						if(arr.includes(item.value)) {
							item.checked = true;
						}
					})
					this.tagList  = res;
				 })
			 },
			 getHouseFacility() {
				  // 3: 户内设施 4: 房间设施 5: 户外设施
				let arr = this.formData.tags.map(item => item.tag_id);
				this.$http.getHouseFacility().then(res=>{
					res.forEach(item=>{
						if(arr.includes(item.value)) {
							item.checked = true;
							this.roomDeviceFlag = true;
						}
						item.tag_id = item.value;
						
						if(item.type == 3) {
							this.roomTagList.indoor.push(item);
						} else if(item.type == 4) {
							this.roomTagList.room.push(item);
						}else if(item.type == 5) {
							this.roomTagList.outDoor.push(item);
						}
					})
				});
			 },
			 setLat(data) {
				
				 this.$http.setLat(data).then(res =>{
				 	
				 });
				 
			 },
			 
			 goPage(path) {
				 this.$goPage(1, path)
			 },
			 changeValue(e, name) {
				 this.formData[name]=  e.detail;
			 },
			 changeCookingValue(e) {
				 this.formData.cooking=  e.detail;
			 },
			bindPickerChange(e) {
				if(e.detail) {
					const {value} = e.detail;
					this.roomIndex = value;
					this.formData.bedrooms = value[0];
					this.formData.livingrooms = value[1];
					this.formData.kitchens = value[2];
					this.formData.bathrooms  = value[3];
				}
 			
			},
			getRoomData() {
				 for(let i=0; i<21; i++) {
					 this.roomData[0].push(i + '室');
					 this.roomData[1].push(i + '厅');
					 this.roomData[2].push(i + '厨');
					 this.roomData[3].push(i + '卫');
				 }
			},
			selectedTag(item) {
				item.checked = !item.checked;
				
			},
			checkData() {
				 let tips = '';
				 let list = this.tagList.filter(item => item.checked) || [];
				 
				 if(!this.formData.description) {
					 tips = '请填写房源介绍'
				 } 
				 else if(!this.formData.landlord_desc) {
					 tips = '请填写管家介绍'
				 }
				 else if(this.formData.area == 0) {
					 tips = '请填写面积'
				 } 
				 
				 else if(!this.formData.bedrooms) {
					 tips = '请选择房型'
				 }
				 else if(this.formData.images.length ==0) {
					 tips = '请上传房屋照片'
				 }
				 else if(!this.roomDeviceFlag) {
				 	 tips = '请选择配套设施'
				 }
				 else if(list.length == 0) {
				 	 tips = '请选择房源特色'
				 }
				if(tips) {
					this.$toast(tips);
				}
				 return tips;
								 
			},
			nextStep() {
				if(this.showStep == 1) {
					this.submit();
				} else if(this.showStep == 2) {
				   let data = this.$refs.setHouseImg.nextStep();
				   if(data) {
					    this.showStep = 1;
						this.formData.images = data;
				   }
				} else if(this.showStep == 3) {
				   let data = this.$refs.setRoomDevice.nextStep();
				   if(data) {
					    this.showStep = 1;
						this.roomDeviceFlag = true;
						this.roomTagList = data;
				   }
				}
				
			},
			handleData() {
				this.tampFormData = JSON.parse(JSON.stringify(this.formData)) ;
				let list = [];
				for(let key in  this.roomTagList) {
					list.push( ...this.roomTagList[key]);
				}
				list.push(...this.tagList);
				let tagsArr = [];
				list.forEach(item=>{
					if(item.checked) {
						tagsArr.push({
							type: item.type,
							tag_id: item.tag_id
						})
					}
				})
				 this.tampFormData.tags = tagsArr;
				 this.tampFormData.images.forEach((item, index, arr) => {
					 arr[index] = {
						 type: item.type,
						 image_path: item.image_path,
						 title: item.title,
						 index: index + 1
					 }
				 })
				 
				
			},
			submit() {
			    this.handleData();
				if(this.checkData()) {
					return;
				}
				console.log(this.tampFormData);
				this.$http.setHouseFacilityInfo(this.tampFormData).then(res=>{
					this.$setStorage('houseId', res.id);
					this.$goPage(1, '/subPublishHouse/setPrice/index');
				});
			}
				
		}
	}
</script>

<style lang="scss" scoped>
	.tag-list {
		.tag-item {
			background: #EFEFEF;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			padding: 10rpx 20rpx;
			margin-bottom: 36rpx;
			margin-right: 36rpx;
			font-size: 27rpx;
			color: #999999;
			display: inline-block;
		}
	}
		
	.active-item {
		background: #FCE353!important;
		color: #222222!important;
	}
	
	
	
</style>
<style>
	.set-input-height {
		 white-space: pre-wrap!important;
		word-break: break-all!important;/* 允许在长单词内任意位置断行 */
		
	}
		
	
</style>

